

body
{
	font-family: helvetica, sans-serif;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:default;
	padding:0px;
	margin:0px;
	width: 930px;
	height: 640px;
	position: relative;
	background: url('../images/bgtexture.png') repeat;
}

/* The widths in CFeralTemplateGame::CreateStartupDialog() were never actually applied and 
   were far too wide to begin with, so these adjustments are added separately as required */
/* Doug's fix to advanced panel width in FR, avoiding necessity for wider window that caused designs to break */

.langFR #tabContentAdvanced.tabbed span.item {
	margin: 0 20px;
}

/*--------*/

#startupVideo
{
	opacity:0; 
	transition:opacity 1s; 
	position:absolute; 
	top: 50%; 
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	width: 100%; 
	height: 100%;
	pointer-events:none; 
	background-color:black;
}

#loadingOverlay
{
	z-index: 65535;
	position:absolute;
	left: 0vw;
	width: 100vw;
	top: 0vh;
	height: 100vh;
	background-color: rgb(0,0,0);
	opacity:1;
}

#loadingOverlay.loadingFinished
{
	pointer-events:none;
	opacity:0;
	-webkit-transition:opacity 1s;
	transition:opacity 1s;
}

/* -----------------------------------------------
   --------------- Navigation Tabs ---------------
  _   _                _                _    _               
 | \ | |              (_)              | |  (_)              
 |  \| |  __ _ __   __ _   __ _   __ _ | |_  _   ___   _ __  
 | . ` | / _` |\ \ / /| | / _` | / _` || __|| | / _ \ | '_ \ 
 | |\  || (_| | \ V / | || (_| || (_| || |_ | || (_) || | | |
 |_| \_| \__,_|  \_/  |_| \__, | \__,_| \__||_| \___/ |_| |_|
                           __/ |                             
                          |___/                              
   -----------------------------------------------*/

#tabbar 
{
	list-style: none;
	margin: 0;
	padding: 0 3px 0 4px;
	background-color: #f37021;
	background-image: url("../images/orangeBack.png");
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	height:61px;
	text-align: center;
	
/*	-webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);*/

	z-index: 2;
	position: relative;
}

#tabbar li.tabSelect
{
	position:relative;

	text-decoration: none;
/* 
	display: inline-block;
 */
	padding: 5px 5px 0;
	margin: 6px 3px;
	line-height: 15px;
	font-size: 11px;
	font-weight: bold;
	color: #ee7b00;
	text-transform: uppercase;
    cursor: pointer;
    background: white;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
    -webkit-box-flex: 1;  /* Safari <6.1 */
    -webkit-flex: 1;  /* Safari 6.1+ */
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

#tabbar li.tabSelect:hover abbr, 
#tabbar li.selectedTabButton abbr
{
	border-color: #0071bc;
}

#tabbar li.tabSelect:hover, 
#tabbar li.selectedTabButton 
{
	color: #0071bc;
}

#tabbar li.tabSelect img
{
	position: absolute;
	top:3px;
	/* Should be 50% - 25px, but that seems to give 
	   less good results than this... ¯\_(ツ)_/¯ */
	left:-webkit-calc(50% - 24px);
	left:calc(50% - 24px);
	margin-left:auto;
	margin-right:auto;
	opacity:0;
	-webkit-transition:opacity 0.2s;
	transition:opacity 0.2s;
}

#tabbar li.tabSelect.selectedTabButton img.selectedImg
{
	opacity:1;
}
#tabbar li.tabSelect:not(.selectedTabButton) img.unselectedImg
{
	opacity:1;
}

#tabbar li.tabSelect span
{
	overflow: hidden;
	text-overflow:ellipsis;
	position:absolute;
	bottom:1px;
	width:100%;
	left:0px;
}


/* ----------------------------------------------- 
   ---------- Playbox / game selection -----------
  _____   _                _                 
 |  __ \ | |              | |                
 | |__) || |  __ _  _   _ | |__    ___ __  __
 |  ___/ | | / _` || | | || '_ \  / _ \\ \/ /
 | |     | || (_| || |_| || |_) || (_) |>  < 
 |_|     |_| \__,_| \__, ||_.__/  \___//_/\_\
                     __/ |                   
                    |___/                    
 -----------------------------------------------*/


#playBox
{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	overflow-x:auto;
/*	z-index:2;
	position: relative;*/
}

#playBox>.playOption {
	height: 108px;
    margin: 5px;
	padding: 10px;
	display: table;
	/*position: relative;*/
	width:-webkit-calc(50% - 10px);
	width:calc(50% - 10px);
	box-sizing:border-box;
	border-style:solid;
	border-color:transparent;
	border-color:#bdbdbd;
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
	-webkit-transition: all .3s ease-out;        
			transition: all .3s ease-out;
	/* Fixes glitch in webkit on retina displays. See: 
	http://stackoverflow.com/questions/13347947/css-filter-on-retina-display-fuzzy-images*/
	-webkit-transform: translateZ(0);
}

#playBox>.playOption:hover {
	-webkit-filter: grayscale(0%);
	        filter: grayscale(0%);
}


#playBox>.playOption:first-child:last-child 
{
	width:-webkit-calc(100% - 10px);
	width:calc(100% - 10px);
}

#playBox>.playOption.selectedGame
{
	border-color:#ee7b00;
	-webkit-filter: none;
	        filter: none;
}

#playBox>.playOption:not(.selectedGame)
{
	cursor: pointer;
}

#playBox>.playOption img.gameIconImg {
	width: 108px;
	height: 108px;
	float: left;
}


#playBox>.playOption>.mainAppName {
	height: 108px;
	display: inline;
	vertical-align: middle;
	font-size: 28px;
	font-style: italic;
	color: #0071bc;
	width: 600px;
	padding: 0 34px 0 23px;
	line-height: 385%;
}

#playBox>.playOption>.mainAppName>.sizeLimited {
	/*100px works well with this font size - you don't get a half-cut line*/
	max-height: 100px;
	/* For browsers that don't support the funky ellipsis trick below*/
	display: block;
	/*All of the following are needed to allow an ellipsis to
	  appear if the text extends beyond 3 rows and it will only 
	  work in webkit browsers and it will probably break at some
	  point, since it relies on ye olde pre-spec-change flexbox*/
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 3;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* Due to overflow hidden and italic, we can 
	   get a little cut off if we don't do this */
	padding-right: 2px;
}



/* ----------------------------------------------- 
   ------------------- TabView -------------------
  _______      _  __      __ _                 
 |__   __|    | | \ \    / /(_)                
    | |  __ _ | |__\ \  / /  _   ___ __      __
    | | / _` || '_ \\ \/ /  | | / _ \\ \ /\ / /
    | || (_| || |_) |\  /   | ||  __/ \ V  V / 
    |_| \__,_||_.__/  \/    |_| \___|  \_/\_/  
                                               
                                               
 -----------------------------------------------*/
.tabView
{
	margin: 0;
	position: absolute;
	z-index: 1;
	right:0;
	top: 61px;
	bottom:0;
	left:0%;
	color: #333333;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	top:204px;
	left:0px;
	/* height:1000px; */
	bottom:50px;
	right:0px;
	height:-webkit-calc(100% - 224px);
	height:calc(100% - 224px);
	width:100%;
	box-sizing:border-box;
	overflow:hidden;
}

.tabbed
{
	overflow: hidden;
	position:absolute;
	width:100%;
	height: 100%;
	box-sizing:border-box;
}



.center
{
	display: block;
	margin-left:auto;
	margin-right:auto;
	white-space: nowrap;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
}
.center .center {
	height: auto;
	margin-top: 0;
}




.item
{
	padding:10px;
	text-align:left;
	display:block;
	min-width: 100px;
	position:relative;
	background-clip:border-box;
	font-size: 15px;
}


.item p
{
	white-space: normal;
}



#tabView,
#footer {
	text-shadow: 1px 1px 2px white, -1px 1px 2px white,  1px -1px 2px white, -1px -1px 2px white, 
				 3px 3px 5px white, -3px 3px 5px white,  3px -3px 5px white, -3px -3px 5px white, 
				 4px 0px 7px white,  0px 4px 7px white, -4px  0px 7px white,  0px -4px 7px white, 
				 4px 4px 7px white, -4px 4px 7px white,  4px -4px 7px white, -4px -4px 7px white;
}

#tabView .ui-dialog,
#tabView #keyEntry,
#tabView .extrasSubSection,
#tabView .supportSubSection,
#tabView .selectricWrapper,
#tabView input,
#tabView .dlcpanel,
#footer  #launchOptionsTip,
#feralAccount
{
	text-shadow: none;
}




/* ----------------------------------------------- 
   ----------------- Focus Ring ------------------
  ______                         _____   _               
 |  ____|                       |  __ \ (_)              
 | |__  ___    ___  _   _  ___  | |__) | _  _ __    __ _ 
 |  __|/ _ \  / __|| | | |/ __| |  _  / | || '_ \  / _` |
 | |  | (_) || (__ | |_| |\__ \ | | \ \ | || | | || (_| |
 |_|   \___/  \___| \__,_||___/ |_|  \_\|_||_| |_| \__, |
                                                    __/ |
                                                   |___/ 
 -----------------------------------------------*/
 
input:focus,
.customSelect:focus,
textarea:focus,
button:focus {
   /* outline: none;*/
   /* outline-color: #F9B890 !important;*/
    /*outline-width:10px;*/
}

button:focus,
input[type=button]:focus
{
	outline-offset:-3px;
}

input[type=checkbox]:focus
{
	outline-offset:-2px;
}

.selectricWrapper.selectricFocus:not(.selectricOpen) > .selectric
{
	outline-color: -webkit-focus-ring-color;
	outline-width: 5px;
	outline-style: auto;
	outline-offset: -2px;
}

#versionStringList:focus
{
	outline-color: -webkit-focus-ring-color;
	outline-width: 5px;
	outline-style: auto;
}




/* ----------------------------------------------- 
   ------------- Scroll with Fading --------------
   _____                    _  _ 
  / ____|                  | || |
 | (___    ___  _ __  ___  | || |
  \___ \  / __|| '__|/ _ \ | || |
  ____) || (__ | |  | (_) || || |
 |_____/  \___||_|   \___/ |_||_|
                                 
                                 
 -----------------------------------------------*/
 

/* ScrollContainers are elements that contain a scrollable element 
   (preferably exactly 1) and do some clever bluring when it is 
   scrollable to tell the user that scrolling is available 
   (extra useful for MacOS when scrollbars default hidden) */

/* :before is the top fade out region, :after is the bottom*/
.scrollContainer:before,
.scrollContainer:after
{
	content: '';
	display: block;
	width: 100%;
	height: 50px;
	background: url('../images/bgtexturebottomfade.png') repeat-x transparent;
	position: absolute;
	pointer-events: none;
	left: 0;
	z-index:21;
	opacity:1;
}

/* Vertically flip the top fade out */
.scrollContainer:before
{
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
	top:0px;
	-webkit-transition: top 0.5s;
	transition: top 0.5s;
}

.scrollContainer:after
{
	bottom:0px;
	-webkit-transition: bottom 0.5s;
	transition: bottom 0.5s;
}

/* When scrolled to top, the top fade out should shift away
   somewhat to ensure the content is visible and not faded */
.scrollContainer.top:before
{
	top:-30px;
}

/* When scrolled to bottom, the bottom fade out should shift 
   away somewhat to ensure the content is visible and not faded */
.scrollContainer.bottom:after
{
	bottom:-30px;
}

/* Some (most) tabs are scrollContainers, 
   but we overlap the fade out region with the footer, 
   which means we need a slightly different look */

/* Overlap the footer */
.tabbed.scrollContainer
{
	height: 100%;
}
/* Add some padding to the bottom of the scrollable element so it's actual 
   content doesn't overlap the footer after scrolling all the way down */
.tabbed.scrollContainer>*:after 
{
	content:'';
	opacity:0;
	font-size:0px;
	margin-top:0px;
	margin-bottom:20px;
	padding-top:0px;
	padding-bottom:0px;
	display:block;
}
/* When fully scrolled up, don't stick in the padding, since we don't want to 
   make the region scrollable if it doesn't have to be 
   (this does assume all regions start off scrolled to the top) */
.tabbed.scrollContainer.top>*:after 
{
	margin-bottom:14px;
}

.tabbed.scrollContainer.top:before
{
	top:-50px;
}
/* We can leave this fade out enabled at all times, 
   since it isn't taking up any space*/
.tabbed.scrollContainer.bottom:after
{
	bottom:0px;
}

/* Special case for certain tabs (support + extras, currently), 
   since if they use the space right in the botom-right 
   corner they'll overlap the play button */
.canOverlapPlayButton.tabbed.scrollContainer
{
	/*Crashes on 10.8. Thankfully it uses this old prefix, so we can skip
	height:-webkit-calc(100% - 48px); */
	height:calc(100% - 48px);
}

.canOverlapPlayButton.tabbed.scrollContainer.bottom:after
{
	bottom:-50px;
}
.canOverlapPlayButton.tabbed.scrollContainer>*:after
{
	margin-bottom:0px;
}
.canOverlapPlayButton.tabbed.scrollContainer.top>*:after
{
	margin-bottom:0px;
}




/* ----------------------------------------------- 
   -------------- Custom Checkboxes --------------
   _____  _                  _     _                 
  / ____|| |                | |   | |                
 | |     | |__    ___   ___ | | __| |__    ___ __  __
 | |     | '_ \  / _ \ / __|| |/ /| '_ \  / _ \\ \/ /
 | |____ | | | ||  __/| (__ |   < | |_) || (_) |>  < 
  \_____||_| |_| \___| \___||_|\_\|_.__/  \___//_/\_\
                                                     
                                                     
 -----------------------------------------------*/
 

input[type=checkbox] {
	margin: 5px 0 0 5px;
	width: 15px;
	height: 15px;
	cursor: pointer;
}

input[type=checkbox]:enabled:hover + label {
	color: #0071BC;
	cursor: pointer;
}

input[type=checkbox] {
	margin-top: 6px;
}

input[type=checkbox] + label {
	padding-left: 10px;
	margin: -1px 0 0 -10px;
}


input[type=checkbox]
{
	-webkit-appearance: none;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
	border-color: #d9d9d9;
	border-radius: 4px;
	background: #fff !important;
	position: relative;
	top:2px;
	-webkit-transition:background-color 0.3s;
	transition:background-color 0.3s;
}


input[type=checkbox]:enabled:hover
{
	background: #F0F0F0 !important;
}

input[type=checkbox]:disabled
{
	opacity: 0.5;
}



label.controlDisabled.checkbox>span
{
	opacity: 0.5;
}

/* all checkboxes should be shifted down a bit to match how they
   look in normal cocoa UIs, and because it just looks better.
   Probably a mac-only change?s*/
label > input[type=checkbox]
{
    position: relative;
	top: 2px;
}

input[type=checkbox]::after
{
	content: '';
	width: 5px;
	height: 9px;
	position: absolute;
	top: 1px;
	left: 4px;
	border-bottom: 2px solid transparent;
	border-right: 2px solid transparent;
	background: transparent;
	-webkit-transform: rotate(38deg);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	box-sizing: border-box;
}

input[type=checkbox]:checked::after
{
	border-bottom: 2px solid #555;
	border-right: 2px solid #555;
}

input[type=checkbox]:indeterminate::after
{
	-webkit-transform: rotate(0deg);
	background-color:#555;
	height: 7px;
	width: 7px;
	top: 3px;
	left: 3px;
}


/* -----------------------------------------------
   ---------- Game specific backgrounds ----------
   _____                             _____                     _   __  _       
  / ____|                           / ____|                   (_) / _|(_)      
 | |  __   __ _  _ __ ___    ___   | (___   _ __    ___   ___  _ | |_  _   ___ 
 | | |_ | / _` || '_ ` _ \  / _ \   \___ \ | '_ \  / _ \ / __|| ||  _|| | / __|
 | |__| || (_| || | | | | ||  __/   ____) || |_) ||  __/| (__ | || |  | || (__ 
  \_____| \__,_||_| |_| |_| \___|  |_____/ | .__/  \___| \___||_||_|  |_| \___|
                                           | |                                 
                                           |_|                                 
                                                           
 -----------------------------------------------*/

#playBoxParent
{
	position: relative;
}

#playBoxParent:before
{
	content:"";
	display:block;
	position: absolute;
	width:100%;
	height:35px;
	z-index: -1;
	top:0px;
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}
#playBoxParent:after
{
	background: url('../../../GamePGOW/images/gameskinPlayBox.png') top right no-repeat;
	background-size: 930px 144px;
	content:"";
	display:block;
	position: absolute;
	width:100%;
	height:100%;
	z-index: -2;
	top:0px;
}

#tabView:before
{
	content:"";
	display:block;
	position: absolute;
	width:100%;
	height:35px;
	z-index: -1;
	top:0px;
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}
#tabView:after
{
	background: url('../../../GamePGOW/images/gameskinTab.png') center center no-repeat;
	background-size: contain;
	content:"";
	display:block;
	position: absolute;
	width:100%;
	height:calc(100% - 48px);
	z-index: -2;
	top:0px;
}
/* Used for the CalendarBackgroundImage */
#tabView > img
{
	position: absolute;
	width: 100%;
	top: 0px;
}



/* -----------------------------------------------
   -------------- Product Key Input ---------------
  _____                  _               _     _  __            
 |  __ \                | |             | |   | |/ /            
 | |__) |_ __  ___    __| | _   _   ___ | |_  | ' /  ___  _   _ 
 |  ___/| '__|/ _ \  / _` || | | | / __|| __| |  <  / _ \| | | |
 | |    | |  | (_) || (_| || |_| || (__ | |_  | . \|  __/| |_| |
 |_|    |_|   \___/  \__,_| \__,_| \___| \__| |_|\_\\___| \__, |
                                                           __/ |
                                                          |___/ 
 -----------------------------------------------*/

#keyEntry {
	border: 2px solid #BDBDBD;
	padding: 20px;
	margin: 0 65px;
	background: rgba(255,255,255,1)
}

.productKeyEntry {
	padding: 0;
	margin-top: 35px;
	text-align: center;
	clear: both;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items:center;
	align-items:center;
	-webkit-box-pack: center;
	-webkit-justify-content:center;
	justify-content:center;
}

.productKeyEntry input + span {
	color: #a5a5a5;
	min-width:15px;
}

input[type=text].productKeyInput:disabled
{
	-webkit-text-fill-color:inherit;
	opacity: 1;
}

input.productKeyInput
{
	width:80px;
	min-width: 50px;
	height: 30px;
	text-align:center; 
	font-family: helvetica, sans-serif;
	-webkit-ime-mode: disabled;
	ime-mode: disabled;
}

input.productKeyInput[readonly]
{
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.0);
    outline: none;
    background-color:transparent;
    
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

/* -----------------------------------------------
   ------------ Documentation Buttons ------------
  _____                    
 |  __ \                   
 | |  | |  ___    ___  ___ 
 | |  | | / _ \  / __|/ __|
 | |__| || (_) || (__ \__ \
 |_____/  \___/  \___||___/
                           
                           
 -----------------------------------------------*/

#tabView .center .item input.docsbutton {
	display: inline-block;
	width: 132px;
	height: 132px;
	-webkit-transition: all .3s linear;
			transition: all .3s linear;
	padding: 97px 10px 0px 10px;
	white-space: normal;
	margin: 5px 5px 2px;
	cursor: pointer;
}

.langRU #tabView .center .item input.docsbutton,
.langJA #tabView .center .item input.docsbutton
{
	width: 170px;
	height: 140px;
	padding: 97px 5px 0px 5px;
}

#tabView .center .item input.manualbutton {
	background: url('../images/manual.svg') center top no-repeat #fdfdfd;
}

#tabView .center .item input.faqsbutton {
	background: url('../images/faqs.svg') center top no-repeat #fdfdfd;
}

#tabView .center .item input.readmebutton {
	background: url('../images/readme.svg') center top no-repeat #fdfdfd;
}

#tabView .center .item input.creditsbutton {
	background: url('../images/credits.svg') center top no-repeat #fdfdfd;
}

#tabView .center .item input.privacybutton {
	background: url('../images/privacy.svg') center top no-repeat #fdfdfd;
}


/* -----------------------------------------------
   -------------- Custom Selectric ---------------
   _____        _              _          _       
  / ____|      | |            | |        (_)      
 | (___    ___ | |  ___   ___ | |_  _ __  _   ___ 
  \___ \  / _ \| | / _ \ / __|| __|| '__|| | / __|
  ____) ||  __/| ||  __/| (__ | |_ | |   | || (__ 
 |_____/  \___||_| \___| \___| \__||_|   |_| \___|
                                                  
                                                  
 -----------------------------------------------*/

.selectricWrapper
{
	min-width: 150px;
}

/* Override with custom scrollbar. Fixes glitchyness with system scrollbar 
(it would appear to still be visible after select box is closed) */
.selectricWrapper .selectricItems::-webkit-scrollbar {
	width: 16px;
	border-left: solid 1px #BDBDBD;
}
 
.selectricWrapper .selectricItems::-webkit-scrollbar-track {
}
 
.selectricWrapper .selectricItems::-webkit-scrollbar-thumb {
	background-color: #CCC;
	border-left: solid 1px #BDBDBD;
}

html .selectricWrapper {
	top:-1px;
	margin-right: 1px; /*override .1 em which ends up causing half-pixel glitchyness in retina*/
}

html .selectric {
	background-color: white;
}

html .selectric p.label {
	text-overflow:ellipsis;
}

html .selectric:hover {
	border-color: #0071bc;
}

html .selectricDisabled .selectric:hover {
	border-color: #DDD;
}

html .selectric b.button {
	border-left: 1px solid #BDBDBD;
}

html .selectricHover .selectric b.button, 
html .selectricDisabled .selectric b.button, 
html .selectricDisabled .selectric b.button:after {
	color: #bbb;
}
html .selectricWrapper.openUpwards .selectricItems
{
	top:auto !important;
	bottom:100% !important;
}

html .selectricItems li {
	background-color: white;
	padding-right: 20px; /*	5px to balance opposite padding and 15px to make
							right side line up with the main select box label
							(which is squished up by the rhs button)*/
}

html .selectricItems {
	overflow-y: scroll;
	top: calc(100% - 1px) !important; /*	-1px so that the border overlaps with the original 
											border instead of appearing like a 2px top border */
}

/* Separator menu items are thin horisontal lines to denote seperation 
   (think the select menu equivilent to <hr>) */
.selectricItems li.separator,
.selectricItems li.separator.disabled
{
	height: 5px;
	min-height: 5px;
	padding: 0px;
	background-color: darkgray ;
	border:none;
}

/* Title menu items are Textual descriptions of following items. 
   They can't be selected and aren't "real" items, so disabled look */
.selectricItems li.selectTitle,
.selectricItems li.selectTitle.disabled
{
	font-size: 1.25em;
	padding:0;
	color:white;
	background-color:darkgrey;
	border-top-width: 0px;
}

/* avoid glowy focus ring around the menu sometimes which didn't make much sense. */
.selectricItems:focus
{
	outline: none;
}


/* -----------------------------------------------
   ------------------- Footer --------------------
  ______             _              
 |  ____|           | |             
 | |__  ___    ___  | |_  ___  _ __ 
 |  __|/ _ \  / _ \ | __|/ _ \| '__|
 | |  | (_) || (_) || |_|  __/| |   
 |_|   \___/  \___/  \__|\___||_|   
                                    
                                    
 -----------------------------------------------*/


#footer
{
	position: absolute;
	bottom:0px;
	width:100%;
	left:0px;
	padding:10px;
	box-sizing:border-box;
/*	border-radius: 7px 7px 0px 0px;
	border-width: 1px 1px 0;
	border-color: #d6d6d6;
	border-style: solid;
	background: white;*/
	z-index: 2;
	font-size: 13px;
	text-align: center;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-align: end;
	-webkit-align-items:flex-end;
	align-items:flex-end;
	-webkit-box-pack:end;
	pointer-events:none;
}

#footer > *
{
	pointer-events:auto;
}

#footer .floatleft {
	
}

#footer input, 
#footer label 
{
	cursor: pointer;
	margin: 0;
}

#footer input {
	background-color: white;
}

#footer label {
	color: #676767;
	padding: 5px;
}

#footer input#main-quitButton 
{
	-webkit-flex-shrink:0;
	flex-shrink:0;
	margin-bottom:2px;
}

/*#footer input#main-quitButton:hover {
	top: -2px;
}*/

#footer input#main-quitButton:active {
	top: 0px;
}

#footer input#keepShownButton[type=checkbox] {
	width: 15px;
	height: 15px;
	top:1px;
}

#alwaysShowContainer {
	position: relative;
	padding: 6px 11px 3px 22px;
	margin-bottom:4px;
	min-width:150px;
}

#footer input#keepShownButton[type=checkbox] ~ span#launchOptionsTip {
	width:360px;
	position: absolute;
	bottom: 30px;
	left: 14px;
	background: url('../images/black.png') repeat; 
	color: #eee;
	padding: 10px;
	background-size: auto 100%;
	border-radius: 5px;
	font-size: 13px;
	line-height: 17px;
	z-index: 20;
	text-align: left;
	-webkit-transition: all linear .8s ;
	transition: all linear .8s ;
	opacity: 1;
	text-decoration: none;
}

#footer input#keepShownButton[type=checkbox] ~ span#launchOptionsTip:after {
	content: 'x';
	position: absolute;
	top: 4px;
	right: 4px;
	border-radius: 100px;
	background: white;
	color: black;
	height: 5px;
	width: 9px;
	text-align: center;
	line-height: 0;
	padding: 4px 0 0 0;
	border: 1px solid white;
	font-size: 12px;
}


#footer input#keepShownButton[type=checkbox] ~ span#launchOptionsTip:before {
	content: url('../images/arrow.png');
	position: absolute;
	bottom: -13px;
	left: 3px;
	z-index: 19;
}

#footer input#keepShownButton[type=checkbox]:not(:checked) ~ span#launchOptionsTip {
	opacity: 1;
	z-index: 20;
	pointer-events: auto;
	cursor: pointer;
}

#footer input#keepShownButton[type=checkbox]:checked ~ span#launchOptionsTip, 
#footer input#keepShownButton[type=checkbox]:not(:checked) ~ span#launchOptionsTip.off {
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

#footer input#keepShownButton + label {
	margin: 0 0 0 -15px; 
	padding: 0 0 0 17px;
	position: relative;
	top: -1px;
}

#footer input#keepShownButton:hover + label {
	color: #0071bc;
	cursor: pointer;
}



#footer span.mainButtons {
	vertical-align: bottom;
	width: auto;
	bottom: 10px;
	right: 10px;
	-webkit-flex-shrink:0;
	flex-shrink:0;
}

#footer span.mainButtons input {
	background: url('../images/arrow.svg') no-repeat 100px center #fdfdfd;
    background-position-x: -webkit-calc(100% - 15px);
    background-position-x: calc(100% - 15px);
	font: italic bold 24px/18px sans-serif;
	text-transform: uppercase;
	text-align: left;
	height: 58px;
	padding: 20px 35px 20px 15px;
	background-size: auto 19px;
	width:auto;
}

#footer span.mainButtons input:hover, 
span.mainButtons input:active 
{
	background: url('../images/arrow.svg') no-repeat 100px center white;
    background-position-x: -webkit-calc(100% - 15px);
    background-position-x: calc(100% - 15px);
	padding: 20px 35px 20px 15px;
	background-size: auto 19px;
}

#footer .verticalRule
{
	width:0px;
	height:25px;
	border-left: 2px #676767 solid;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:4px;
}

#footer #versionStringList {
	display: -webkit-box;
	font-weight: normal;
	font-style: normal;
	color: #676767;
	white-space: nowrap;
	background: transparent;
	font-family:Sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    font-size: inherit;
	text-decoration: inherit;
	margin:0px;
	margin-right: 10px;
	outline: none;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	margin-bottom: 2px;
	padding: 5px 11px 6px;
	border-radius: 0;
	-webkit-box-align:end;
	-webkit-box-flex: 1;
	-webkit-flex-grow:1;
	-webkit-flex-basis: 150px;
	flex-grow:1;
	flex-basis: 150px;
}

#footer #versionStringList option {
	text-align: center;
	font-weight: normal;
	font-style: normal;
	white-space: nowrap;
}

#footer #versionStringList:focus {
	background: transparent !important;
}

/* -----------------------------------------------
   -------------- Pop-ups / Dialogs --------------
  _____   _         _                    
 |  __ \ (_)       | |                   
 | |  | | _   __ _ | |  ___    __ _  ___ 
 | |  | || | / _` || | / _ \  / _` |/ __|
 | |__| || || (_| || || (_) || (_| |\__ \
 |_____/ |_| \__,_||_| \___/  \__, ||___/
                               __/ |     
                              |___/      
 -----------------------------------------------*/

body .ui-widget-overlay {
	background: -moz-radial-gradient(center, 
									 ellipse cover,  
									 rgba(0,0,0,0.85)   0%, 
									 rgba(0,0,0,0.6 )  50%, 
									 rgba(0,0,0,0.85) 100%);
	background: -webkit-gradient(radial, 
								 center center, 
								 0px, 
								 center center, 
								 100%, 
								 color-stop(  0%,rgba(0,0,0,0.85)), 
								 color-stop( 50%,rgba(0,0,0,0.6 )), 
								 color-stop(100%,rgba(0,0,0,0.85)));
	background: -webkit-radial-gradient(center, 
										ellipse cover,  
										rgba(0,0,0,0.85)   0%,
										rgba(0,0,0,0.6 )  50%,
										rgba(0,0,0,0.85) 100%);
	background: -o-radial-gradient(center, 
								   ellipse cover,  
								   rgba(0,0,0,0.85)   0%,
								   rgba(0,0,0,0.6 )  50%,
								   rgba(0,0,0,0.85) 100%);
	background: -ms-radial-gradient(center, 
									ellipse cover,  
									rgba(0,0,0,0.85)   0%,
									rgba(0,0,0,0.6 )  50%,
									rgba(0,0,0,0.85) 100%);
	background: radial-gradient(ellipse at center,  
								rgba(0,0,0,0.85)   0%,
								rgba(0,0,0,0.6 )  50%,
								rgba(0,0,0,0.85) 100%);

	opacity: 1;
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
}
body .ui-widget-overlay.fadeInOverlay {
	opacity: 0;
}
body .ui-widget-overlay.fadeOutOverlay {
	opacity: 0;
	pointer-events:none;
}

body .ui-dialog {
	font-family: helvetica, sans-serif;
	padding: 0;
	border: none;
	-webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.7);
	box-shadow: 0 0 30px 0 rgba(0,0,0,.7);
	color: #333;
	background: white;
	font-size: 15px;
}

body .ui-widget-header {
	background-color: #f37021;
	background-image: url("../images/orangeBack.png");
	background-position: bottom;
	border: none;
	color: black;
	
/* We don't want curved corners at the bottom of the title bar 
   and the top is already curved by the parent element. 
   Meanwhile, turning off the curving of this element significantly 
   reduces the whitening in the corners of the dialogs.
   Pretty sure that is just caused by a glitch in webkit, 
   but we kill 2 birds with 1 stone by disabling curved corners */
	border-radius:0px;
}

body .ui-dialog label:not(.controlDisabled):hover {
	color: #0071bc;
	cursor: pointer;
}

body .ui-dialog input[type="checkbox"] {
	width: 15px;
	height: 15px;
}

body .ui-dialog .ui-dialog-titlebar-close {
	right: 5px;
	top:5px;
	margin: 0;	
	border: 1px solid #ff8d00;
	z-index: 20;
}

body .ui-dialog .ui-dialog-titlebar-close:after {
	content: 'x';
	position: absolute;
	font-weight: normal;
	top: 8px;
	left: 5px;
	font-size: 17px;
	line-height: 0;
}

body .ui-dialog .ui-dialog-titlebar-close span {
	background: none;
	
}

.ui-dialog .ui-dialog-content.dialog.iframe {
	padding: 0;
	position: relative;
}



div#DocumentationDialog
{
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	position:relative;
	overflow:hidden;
	font-size: 0px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

@media (max-height: 589px)
{
	div#DocumentationDialog
	{
		max-height: calc(100px - 45px) !important;
		min-height: calc(100vh - 45px) !important;
	}
}

div#DocumentationDialog>iframe
{
	height:100%;
	width:100%;
	margin: 0 0 0;
	border: none;
	padding: 0; 
}

.ui-dialog[aria-describedby="DocumentationDialog"]
{
	overflow: visible;
	border-radius: 4px;
	
	/*White background can bleed through, so add a couple pixels space to avoid that*/
	border-top-left-radius: 4px;
	border-top-right-radius: 6px;
}

@media (max-height: 589px)
{
	.ui-dialog[aria-describedby="DocumentationDialog"]
	{
		max-height: 100vh !important;
	}
}
@media (max-width: 879px)
{
	.ui-dialog[aria-describedby="DocumentationDialog"]
	{
		max-width: 100vw !important;
	}
}
.ui-dialog[aria-describedby="DocumentationDialog"] .ui-dialog-titlebar
{
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.ui-dialog[aria-describedby="DocumentationDialog"] .ui-dialog-buttonpane
{
	position:absolute !important;
	bottom:0px;
	right:0px;
	white-space: nowrap;
	border-left-width: 1px;
	border-top-left-radius: 4px;
	border-bottom-right-radius: 4px;
	/*box-shadow: 0px 0px 10px 0px black;*/
	pointer-events:none;
	background-color: rgba(200,200,200,0.5);
}

.ui-dialog[aria-describedby="DocumentationDialog"] .ui-dialog-buttonpane>.ui-dialog-buttonset>*
{
	pointer-events: auto;
}


.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset 
{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	width: webkit-calc(100% - 9px);
	width: calc(100% - 9px);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	-webkit-box-ordinal-group: 3;
	-webkit-order:3;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset:after {
	content:"";
	-webkit-box-flex: 1;
	-webkit-flex-grow:1;
	-webkit-box-ordinal-group: 2;
	-webkit-order:2;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.dialogButtonOnLeft {
	-webkit-box-ordinal-group: 1;
	-webkit-order:1;
}

/* enables image links in custom dialogs */
#CustomAlertDialog a > * {
	pointer-events: auto;
}

#AlertIcon {
	width: 108px;
	height: 108px;
	flex-shrink: 0;
	padding-right: 10px;
}

#AlertDialog {
	display: flex;
	flex-direction: row;
}

#AlertDialogCheckboxContainer
{
	padding-top: 10px;
}

/* -----------------------------------------------
   ---------- Not yet sorted / Unsorted ----------
  _    _                           _             _ 
 | |  | |                         | |           | |
 | |  | | _ __   ___   ___   _ __ | |_  ___   __| |
 | |  | || '_ \ / __| / _ \ | '__|| __|/ _ \ / _` |
 | |__| || | | |\__ \| (_) || |   | |_|  __/| (_| |
  \____/ |_| |_||___/ \___/ |_|    \__|\___| \__,_|
                                                   
                                                   
 -----------------------------------------------*/





/*label
{
	position:relative;
	top: 1px;
}*/

label:not(.controlDisabled)
{
	-webkit-transition:color 0.1s;
	transition:color 0.1s;
	color:#333333;
}

label:not(.controlDisabled):hover
{
	color: #0071bc;
	cursor: pointer;
}

div#tabContentActivation.tabbed h3, 
div#tabContentAbout.tabbed h3, 
.supportSubSection h3, 
div#tabContentVideo h3 {
	text-align: center;
	margin: 0 0 10px;
	text-transform: uppercase;
	font-size: 14px;
	float: left;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 5px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 5px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 5px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 5px;
}

.throbber
{
	display: inline-block;
	width:32px;
	height:32px;
	background-image: url("../images/ajax-loader.gif");
	background-repeat: no-repeat;
	background-position: center center;
}

.navigation a:hover 
{
	background: #00b7f5;
}

.stretchButton1
{
	width:300px;
	width:-webkit-calc(100% - 10px);
	width:calc(100% - 10px);
	margin:5px;
	display: table-cell;
	text-align:center;
}
.stretchButton2
{
	left:auto;
	right:auto;
	position: relative;
	width:150px;
	width:-webkit-calc(50% - 10px);
	width:calc(50% - 10px);
	margin:5px;
	display: table-cell;
	text-align:center;
}
.centered
{
	position: relative;
}
.centered2
{
	position: relative;
}

.stretchedCell
{
	width:100%;
}


.stretchedInCell
{
	width:-webkit-calc(100% - 6px);
	width:calc(100% - 6px);
}



.stretchedSelectBox
{
	width:-webkit-calc(100% - 10px);
	width:calc(100% - 10px);
}


label.noWrap
{
	white-space: nowrap;
}


.tabbed.selected
{
	left:0%;
	opacity: 1;
	-webkit-transition:all 0.5s, opacity 0.5s;
	transition:all 0.5s, opacity 0.5s;
}

.notransparent
{
}

.tabbed:not(.selected)
{
	opacity: 0;
	-webkit-transition:all 1s, opacity 1s;
	transition:all 1s, opacity 1s;
}

.tabbed.left:not(.selected)
{
	left:-200%;
}

.tabbed.right:not(.selected)
{
	left:200%;
}

.customSelect 
{
	box-sizing:border-box;
	background-color: white;
	padding: 6px 10px;
	border: 4px solid #b7bfcf;
	background: url("../images/select-box-bg.gif") right center;
	border-radius: 10px;
}

.customSelect.customSelectHover 
{
	border-color: #aeb7c9;
	box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 2px;
}

.customSelect.customSelectFocus 
{
	border-color: #996633;
}

.customSelect.customSelectOpen 
{
	border-color: #5d5074;
	background: url("../images/select-box-bg-on.gif") right center;
}

.flexParent
{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
}

.flexParent>*
{
}

.flexSpace
{
	-webkit-box-flex: 1;
	-webkit-flex-grow:1;
	flex-grow:1;
}

.flexGrow
{
	-webkit-box-flex: 1;
	-webkit-flex-grow:1;
	flex-grow:1;
}

.flexWrap
{
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexCenter
{
	-webkit-box-pack: center;
	-webkit-justify-content:center;
	justify-content:center;
}

.flexSpaceBetween
{
	-webkit-box-pack: justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}

.flexAlignBaseline
{
	-webkit-box-align: center;
	-webkit-align-items:baseline;
	align-items:baseline;
}

.flexAlignCenter
{
	-webkit-box-align: center;
	-webkit-align-items:center;
	align-items:center;
}

.flexStart
{
	-webkit-box-align: start;
	-webkit-align-items:flex-start;
	align-items:flex-start;
}

.flexVertical
{
	-webkit-box-orient: vertical;
	-webkit-flex-direction:column;
	flex-direction:column;
}

.flexUnshrinkable
{
	-webkit-flex-shrink:0;
	flex-shrink:0;
}

.flexParent.flexAlignBaseline>input[type=text],
.flexParent.flexAlignBaseline>input[type=password]
{
	-webkit-align-self:center;
	align-self:center;
}

input[type=text],
input[type=password]
{
	font-size: medium;
}

.heightTransition
{
	-webkit-transition:height 1s;
	transition:height 1s;
}

.table
{
	display: table;
}
.tableRow
{
	display: table-row;
}
.tableColumn
{
	display: table-cell;
	vertical-align: middle;
	padding:5px;
}
.smallText
{
    font-size: small !important;
}

.textCenter
{
	text-align:center;
}

textarea
{
	min-height:200px;
}

/* Prevent image dragging/rightclick menu */
img
{
	pointer-events: none;
}

/* disabled elements don't need right click, and some of them are modified 
   to look like normal elements, so the odd right click is confusing. */
input:disabled
{
	pointer-events: none;
}

/* Avoid annoying bug where click-hold-dragging across a button 
   (without going outside it), then releasing, doesn't trigger a 
   click if you crossed the internal boundary of the span. 
   Easy to do that by accident, so lets let it work by having all  
   clicks go through the button, as if the span wasn't there. */
button>span.ui-button-text
{
	pointer-events: none;
}



input {
	font-family: helvetica, sans-serif !important;
}

input[type=button], 
body .ui-dialog input[type=button], 
body .ui-dialog .ui-dialog-buttonset button {
	background-color: #fdfdfd;
	color: #0071bc;
	border: 1px solid #d9d9d9;
	border-bottom: 2px solid #d1d1d1;
	position: relative;
	font-size: 14px;
	-webkit-transition: all .3s linear;
			transition: all .3s linear;
	background-image: none;
	cursor: pointer;
}

input[type=button]:hover, 
body .ui-dialog input[type=button]:hover, 
body .ui-dialog .ui-dialog-buttonset button:hover {
	background-color: white;
	border-color: #b2b2b2;
	border-bottom: 2px solid #989898;
	background-image: none;
	cursor: pointer;
	
}

input[type=button]:active, 
body .ui-dialog input[type=button]:active, 
body .ui-dialog .ui-dialog-buttonset button:active {
	background-color: #e5e5e5;
	background-image: none;
	cursor: pointer;
	color: #6c6c6c;
}

label
{
	position: relative;
	margin-right:8px;
	margin-top:4px;
	margin-left:0px;

}

label>span
{
	white-space:normal;
}

.floatright
{
	float:right;
}
.floatleft
{
	float:left;
}

.clearBoth
{
	clear:both;
}

.noDisplay,
.noDisplayTransient
{
	display:none !important;
}

/*Special case this as otherwise it makes the checkbox jump around*/
.visiblePropShouldHide.noDisplay 
{
	display:initial !important;
	visibility: hidden;
}

.noTransition
{
	-webkit-transition:none !important;
	transition:none !important;
}

abbr
{
	/* Webkit in 10.11 doesn't support dotted underline. */
	/*text-decoration: underline;
	text-decoration: underline dotted;*/

	text-decoration: none;
	border-bottom: 1px dotted #ee7b00;
	line-height: 0.9;
	display: inline-block;
}

